<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="80px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>
					<el-form-item label="关键词" prop="keyword">
						<el-input v-model="queryParams.keyword" placeholder="请输入关键词" clearable class="resetInput"
							style="width: 200px" :suffix-icon="Search" @keyup.enter="handleQuery" />
					</el-form-item>
					<el-form-item label="审批状态" prop="status">
						<el-select v-model="queryParams.status" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_examine_status" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="付款方式" prop="paymentMethod">
						<el-select v-model="queryParams.paymentMethod" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_pay_status" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="回款日期" prop="channelType">
						<datePickerRange ref="clearPicker" @dateRangeValue="changeTime"></datePickerRange>
						<!-- <el-date-picker
							v-model="time"
							value-format="YYYY-MM-DD"
							type="daterange"
							range-separator="至"
							start-placeholder="请选择开始时间"
							end-placeholder="请选择结束时间"
							size="large"
						 /> -->
					</el-form-item>
				</div>
				<el-form-item>
					<div class="flex col-center row-end" style="margin-right: 0">
						<div class="main-color cursor mr5" style="width: 40px;line-height: 18px;"
						v-hasPermi="['height:search']"
						@click="filterFunc()"
						>高级筛选</div>
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<span class="fb fs16">回款列表</span>
				<div>
					<el-button type="operate" @click="rankFunc()">
						<img v-if="queryParams.sort == true" src="@/assets/images/rank.png" class="mr5" style="width: 10px;" alt=""/>
						<img v-else src="@/assets/images/rank1.png" class="mr5" style="width: 10px;" alt="" />
						排序
					</el-button>
					<el-button type="defaultBtn" v-hasPermi="['payment_received:add']" @click="handleAdd">
						回款登记
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }">
				<el-table-column label="回款编号" align="center" prop="paymentNumber">
					<template v-slot="scope">
						<span class="main-color cursor" @click="detail(scope.row,1)">{{scope.row.paymentNumber}}</span>		
					</template>
				</el-table-column>
				<el-table-column label="关联订单" align="center" prop="relatedOrder">
					<template v-slot="scope">
						<span class="main-color cursor" @click="detail(scope.row,2)">{{scope.row.relatedOrder}}</span>		
					</template>
				</el-table-column>
				<el-table-column label="回款日期" align="center" prop="paymentDate"/>
				<el-table-column label="付款方式" align="center" prop="paymentMethod" >
					<template v-slot="scope">
						<dict-tag :options="bus_pay_status" :value="scope.row.paymentMethod" />
					</template>
				</el-table-column>
				<el-table-column label="审批状态" align="center" prop="status" width="200">
					<template v-slot="scope">
						<div class="flex col-center row-center"
						:class="activeStatus(scope.row.status)"
						>
							<span class="drop"></span>
							<dict-tag :options="bus_examine_status" :value="scope.row.status" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="回款金额" align="center" prop="paymentAmount" width="200" />
				<el-table-column fixed="right" label="操作" align="center" width="200">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleDetail(scope.row)"
						v-hasPermi="['payment_received:detail']"
							>详情</el-button>
						<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
						v-hasPermi="['payment_received:edit']"
							>编辑</el-button>
						<el-button size="mini" type="text" @click="handleDelete(scope.row)"
						v-hasPermi="['payment_received:remove']"
							>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<!-- 高级筛选弹窗 -->
		<el-dialog
		  title="高级搜索"
		  v-model="dialogVisible"
		  width="700"
		  center
		  :before-close="handleClose">
		  <div>
			<el-form class="pt20" style="padding-bottom: 0;" label-width="100px"
				:model="queryParams" ref="queryForm" :inline="true">
				<el-form-item label="关键词" prop="keyword">
					<el-input v-model="queryParams.keyword" placeholder="请输搜索关键词" clearable class="resetInput"
						style="width: 200px" :suffix-icon="Search" @keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="审批状态" prop="keyword">
					<el-select v-model="queryParams.status" placeholder="请选择" size="large"
						style="width: 200px">
						<el-option v-for="dict in bus_examine_status" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="审批完成时间" prop="time2">
					<el-date-picker
						v-model="time2"
						value-format="YYYY-MM-DD"
						type="daterange"
						range-separator="至"
						start-placeholder="请选择开始时间"
						end-placeholder="请选择结束时间"
						size="large"
						style="width: 200px"
					 />
				</el-form-item>
				<el-form-item label="付款方式" prop="paymentMethod">
					<el-select v-model="queryParams.paymentMethod" placeholder="请选择" size="large"
						style="width: 200px">
						<el-option v-for="dict in bus_pay_status" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="回款日期" prop="time">
					<el-date-picker
						v-model="time"
						value-format="YYYY-MM-DD"
						type="daterange"
						range-separator="至"
						start-placeholder="请选择开始时间"
						end-placeholder="请选择结束时间"
						size="large"
						style="width: 200px"
					 />
				</el-form-item>
				<el-form-item label="审批提交时间" prop="time1">
					<el-date-picker
						v-model="time1"
						value-format="YYYY-MM-DD"
						type="daterange"
						range-separator="至"
						start-placeholder="请选择开始时间"
						end-placeholder="请选择结束时间"
						size="large"
						style="width: 200px"
					 />
				</el-form-item>
				<el-form-item label="订单所属人员" prop="orderBy">
					<el-select v-model="queryParams.orderBy" placeholder="请选择" size="large"
						style="width: 200px">
						<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
							:value="dict.userId" />
					</el-select>
				</el-form-item>
				<el-form-item label="订单所属部门" prop="orderByDept">
					<el-tree-select size="large" v-model="queryParams.orderByDept" :data="deptOptions"
					 :props="{
					   value: 'deptId',
					   label: 'deptName',
					   children: 'children',
					}"  placeholder="请选择" 
					value-key="deptId"
					show-checkbox
					 style="width: 200px;"
					 />
				</el-form-item>
			</el-form>	
		  </div>
		  <div slot="footer" class="dialog-footer text-right mt30">
			<el-button class="cancelSubBtn" @click="resetQuery">重 置</el-button>
			<el-button type="primary"  @click="handleQuery" class="mainSubBtn">确 定</el-button>
		  </div>
		</el-dialog>
		<!-- 回款登记弹窗 -->
		<receviedPop ref="dialog1" :type="isType" :id="id" :customerMes="''" @getList="getList"></receviedPop>
		<!-- 详情弹窗 -->
		<receviedDetailPop ref="detail"></receviedDetailPop>
		<task-handle ref="taskHandler" :header="-1" @taskSubmitEvent="handleQuery"></task-handle>
	</div>
</template>

<script setup name="ProductSetup">
	import {
		findProcess,//查询业务流程
	} from "@/api/business/order";
	import {
		receivedList, //列表
		delReceived,//删除
	} from "@/api/business/received";
	
	import {
		Search
	} from '@element-plus/icons-vue'
	
	import {
	   listDept,//査部门
	} from "@/api/system/dept";
	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_channel, //销售渠道
		bus_examine_status,//审批状态
		bus_pay_status,//付款方式
	} = proxy.useDict(
		"bus_channel",
		"bus_examine_status",
		"bus_pay_status"
		);
</script>
<script>
	import receviedDetailPop from "./detailPop.vue"//回款登记弹窗
	import receviedPop from "./components/receviedPop.vue"//回款登记弹窗
	import TaskHandle from "@/views/flyflow/components/task/handler/task.vue"
	export default {
		components:{
			receviedDetailPop,
			receviedPop,
			TaskHandle
		},
		data() {
			return {
				isType:0,//0新增登记 1：编辑登记
				bus_order_status:this.useDict('bus_order_status').bus_order_status,
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 产品表格数据
				time:[],
				time1:[],//审批提交时间
				time2:[],//审批完成时间
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyword: '', // 关键字
					status:'',//状态
					type:'',//类型
					startTime:'',//开始时间
					endTime:'',//结束时间
					paymentMethod:'',//付款方式
					auditAddSTime:'',//审批提交开始时间
					auditAddETime:'',//审批提交结束时间
					auditOverSTime:'',//审批完成开始时间
					auditOverETime:'',//审批完成结束时间
					orderBy:'',//订单所属人员
					orderByDept:'',//订单所属部门
					relatedOrder:'',
					sortKey:'submission_time',
					sort:true
				}, //查询参数
				rank:false,
				dialogVisible:false,
				deptOptions:[],//部门
				teamOptions: [], //业务经理
				id:'',//要回显的id
			}
		},
		created() {
			this.getList()
			this.getWorkList()
		},
		methods: {			
			// 高级筛选
			filterFunc(){
				this.dialogVisible = true
			},
			// 获取部门
			getWorkList() {
				listDept().then((response) => {
				   this.deptOptions = this.handleTree(response.data, "deptId");
				});
			},
			// 排序
			rankFunc(){
				this.rank = !this.rank
				this.queryParams.sort = this.rank
				this.getList()
				this.$forceUpdate()
			},
			//查询商品列表
			getList() {
				this.loading = true;
				receivedList(this.queryParams).then((response) => {
					this.list = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			//时间
			changeTime(e) {
				this.queryParams.startTime = e[0]
				this.queryParams.endTime = e[1]
				// this.queryParams.auditAddSTime = e[0]
				// this.queryParams.auditAddETime = e[0]
				// this.queryParams.auditOverSTime = e[1]
				// this.queryParams.auditOverETime = e[1]
			},
			/** 搜索按钮操作 */
			handleQuery() {
				//回款日期
				// this.queryParams.startTime = this.time[0]
				// this.queryParams.endTime = this.time[1]
				// this.queryParams.auditAddSTime = this.time1[0]
				// this.queryParams.auditAddETime = this.time1[0]
				// this.queryParams.auditOverSTime = this.time2[0]
				// this.queryParams.auditOverETime = this.time2[0]
				
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.queryParams.startTime = ''
				this.queryParams.endTime = ''
				this.$refs.clearPicker.clearPickerValue()
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 启用状态操作
			updateEnabled(row) {
				this.loading = true;
				let item = {
					id: row.id,
					status: row.status,
				}
				updateProduct(item).then((response) => {
					this.$modal.msgSuccess("启用状态更新成功");
					this.loading = false;
					this.getList();
				});
			},
			//新增
			handleAdd() {
				this.isType = 0
				this.id = ''
				this.$refs.dialog1.open()
			},
			// 编辑
			handleUpdate(row) {
				this.isType = 1
				this.id = row.paymentNumber
				this.$refs.dialog1.open()				
			},
			//详情
			detail(value,num){
				let data = {
					processId:num == 1 ? value.processNumber : value.orderProcessNumber
				}
				findProcess(data).then(res=>{
					let row = res.data
					// let data1 = {
					// 	taskId: value.processNumber
					// }
					this.$refs.taskHandler.deal(row)
				})
				return false;
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			handleDelete(row) {
				const ids = row.id || this.ids;
				let that = this
				this.$modal
					.confirm('是否确认删除回款编号为"' + ids + '"的数据项？')
					.then(function() {
						delReceived(ids).then(res => {
							that.getList()
							this.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			},
			// 详情
			handleDetail(row){
				this.$refs.detail.open(row.paymentNumber)
				return false;
				this.$router.push('/payment/receivedDetail?id='+row.paymentNumber)
			}
		}
	}
</script>